<template>
  <div class="loginWrapper">
    <div class="bg-user"></div>
    <div style="position: absolute; left: 50%; width: 50%; margin-top: -40px">
      <div class="login-container">
        <div class="login-header">
          <img src="@/assets/logo.png" alt="logo" class="logo" />
          <h1>RAIM ADS-B预测系统</h1>
        </div>
        <el-form
          ref="loginFormRef"
          :model="loginForm"
          :rules="loginRules"
          class="login-form"
        >
          <el-form-item prop="username">
            <el-input v-model="loginForm.username" placeholder="请输入用户名">
              <template #prefix>
                <img
                  src="@/assets/images/user/PeopleIcon.png"
                  alt="请输入用户名"
                  class="custom-icon"
                />
              </template>
            </el-input>
          </el-form-item>

          <el-form-item prop="password">
            <el-input
              v-model="loginForm.password"
              type="password"
              placeholder="请输入密码"
            >
              <template #prefix>
                <img
                  src="@/assets/images/user/UnlockIcon.png"
                  alt="请输入密码"
                  class="custom-icon"
                />
              </template>
            </el-input>
          </el-form-item>

          <el-form-item prop="code" class="code-item">
            <el-input
              v-model="loginForm.code"
              placeholder="验证码"
              class="code-input"
            >
              <template #prefix>
                <img
                  src="@/assets/images/user/ProtectIcon.png"
                  alt="验证码"
                  class="custom-icon"
                />
              </template>
            </el-input>
            <img :src="captchaUrl" @click="getCaptchaImage" class="code-img" />
          </el-form-item>

          <el-form-item>
            <el-button type="primary" class="loginBtn" @click="loginFormHandle">
              登录
            </el-button>
          </el-form-item>
          <div class="login-footer">
            <el-link
              @click="toForgotPassword"
              type="primary"
              class="linkA"
              style="float: left"
              >忘记密码？</el-link
            >
            <el-link
              @click="toRegister"
              type="primary"
              class="linkA"
              style="float: right"
              >立即注册</el-link
            >
          </div>
        </el-form>
      </div>
    </div>
    <div class="loginFooter">
      <div class="loginLeft">
        <div class="loginLeftInnerBox">
          <h3>公告</h3>
          <div class="text-wrap">
            <div
              class="textLeft"
              data-index="0"
              :title="overflowStates[0] ? bulletinBoards.title1 : ''"
            >
              {{ bulletinBoards.title1 }}
            </div>
            <div class="textRight">{{ bulletinBoards.time1 }}</div>
          </div>
        </div>
        <div class="loginLeftInnerBox">
          <h3>公告</h3>
          <div class="text-wrap">
            <div
              class="textLeft"
              data-index="1"
              :title="overflowStates[1] ? bulletinBoards.title2 : ''"
            >
              {{ bulletinBoards.title2 }}
            </div>
            <div class="textRight">{{ bulletinBoards.time2 }}</div>
          </div>
        </div>
      </div>
      <div class="loginRight">
        <div class="loginRightText">
          <h3>声明</h3>
          系统的输入为 FAA 和 USCoastGuard 提供的 NOTAM 和 NANU
          报文,不保证应用的报文与 GPS 卫星实际情况相一致, RAIM
          预测可能受到卫星的突发故障、电离层剧烈变化等多种不可预见因素的影响,这些因素无法及时反应到
          RAIM
          预测系统的输入,将可能导致预测结果与实际不符,系统不承担由此造成后果的法律责任;当使用该
          RAIM 系统辅助航班放行时,应取得满足 AC-91FS-01 或 AC-91-08 的使用许可。
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, nextTick, onUnmounted } from "vue";
import { useRouter } from "vue-router";
import { useUserStore } from "@/store/modules/user";
import { getCaptchaImageApi, noticesListLimitApi } from "@/api/user";
import { ElMessage } from "element-plus";

const userStore = useUserStore();
const loginForm = reactive({
  username: "",
  password: "",
  code: "",
  uuid: "",
});
const bulletinBoards = reactive({
  title1: "",
  title2: "",
  time1: "",
  time2: "",
});

const router = useRouter();
const loginFormRef = ref();
const captchaUrl = ref("");
const loginRules = ref({});

const overflowStates = ref({
  0: false,
  1: false,
});

const checkTextOverflow = (text, index) => {
  if (!text) {
    overflowStates.value[index] = false;
    return;
  }
  const el = document.querySelector(`.textLeft[data-index="${index}"]`);
  if (!el) {
    overflowStates.value[index] = false;
    return;
  }
  el.offsetWidth;
  const isOverflow = el.scrollWidth > el.clientWidth + 1;
  overflowStates.value[index] = isOverflow;
};

onMounted(() => {
  getCaptchaImage();
  getNoticesListLimit();
  window.addEventListener("resize", handleResize);
});

const handleResize = () => {
  nextTick(() => {
    checkTextOverflow(bulletinBoards.title1, 0);
    checkTextOverflow(bulletinBoards.title2, 1);
  });
};

onUnmounted(() => {
  window.removeEventListener("resize", handleResize);
});

const getCaptchaImage = async () => {
  const { code, data } = await getCaptchaImageApi();
  if (code === 200) {
    captchaUrl.value = "data:image/gif;base64," + data.img;
    loginForm.uuid = data.uuid;
  }
};

const getNoticesListLimit = async () => {
  const { code, data } = await noticesListLimitApi();
  if (code === 200) {
    bulletinBoards.title1 = data.list?.[0]?.title || "";
    bulletinBoards.title2 = data.list?.[1]?.title || "";
    bulletinBoards.time1 = data.list?.[0]?.updateTime || "";
    bulletinBoards.time2 = data.list?.[1]?.updateTime || "";

    await nextTick();

    checkTextOverflow(bulletinBoards.title1, 0);
    checkTextOverflow(bulletinBoards.title2, 1);
  }
};

const loginFormHandle = () => {
  userStore
    .login(loginForm)
    .then((res) => {
      if (res.code && res.code === 200) {
        ElMessage.success("登录成功！");
        router.push("/mainLayout");
      }
    })
    .catch((error) => {
      console.error("登录接口报错详情：", error);
    });
};

const toForgotPassword = () => {
  router.push("/forgotpassword");
};

const toRegister = () => {
  router.push("/register");
};
</script>

<style scoped lang="scss">
.loginWrapper {
  position: relative;
  width: auto;
  min-width: 1280px;
  box-sizing: border-box;
  height: 99.99vh;
  min-height: 580px;
  background-color: #001a40;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.bg-user {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100vh;
  background-image: url("../../assets/images/user/yonghuBg.png");
  background-size: cover;
  background-position: left;
  background-repeat: no-repeat;
  z-index: 1;
  pointer-events: none;
}

.custom-icon {
  width: 20px;
  height: 20px;
  margin-right: 8px;
  object-fit: contain;
}

.code-item {
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
  padding-right: 0 !important;
}

.code-input {
  width: 60% !important;
  float: left;
}

.code-img {
  width: 35% !important;
  float: left;
  margin-left: 5%;
  height: 44px;
  border-radius: 12px;
  background-color: #050d24;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 12px;
  box-sizing: border-box;
  cursor: pointer;
}

.login-container ::v-deep .el-input__wrapper {
  width: 100% !important;
  height: 44px !important;
  flex-shrink: 0;
  border-radius: 12px;
  background: #050d24;
  backdrop-filter: blur(7.61834192276001px);
  box-shadow: none;
  .el-input__inner {
    font-size: 14px;
    color: #ffffff !important;
  }
}

.login-container {
  box-sizing: border-box;
  width: 380px;
  margin-top: 0px;
  min-height: 360px;
  margin: 0 auto;
}

.login-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.logo {
  width: 56px;
  height: 46px;
  margin-right: 12px;
}

.login-form {
  width: 100%;
  box-sizing: border-box;
  .el-form-item {
    margin-bottom: 22px;
  }
}

.loginBtn {
  width: 100% !important;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(90deg, #00afff 0.03%, #00539f 101.88%);
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  box-sizing: border-box;
  line-height: 28px;
}

.login-header h1 {
  font-weight: 800 !important;
  color: #fff;
  font-size: 2.5rem;
}

.login-footer {
  margin-top: 10px;
  .linkA {
    color: #c5d6e6;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 22px;
  }
}

.loginFooter {
  bottom: 20px;
  position: absolute;
  z-index: 10;
  clear: both;
  height: 134px;
  width: 100%;
  .loginLeft {
    width: 50%;
    float: left;
    box-sizing: border-box;
    margin-top: 47px;
    .loginLeftInnerBox {
      width: 48%;
      height: 72px;
      border-radius: 8px;
      background-color: #022a55;
      margin-left: 2%;
      float: left;
      color: #ffffff;
      box-sizing: border-box;
      h3 {
        margin-left: 12px;
        margin-top: 8px;
        margin-bottom: 10px;
        line-height: 22px;
        float: left;
        font-size: 14px;
        font-weight: 700;
      }
      .text-wrap {
        clear: both;
        display: flex;
        align-items: center;
        gap: 20px;
        padding: 0 12px;
        height: calc(100% - 40px);
      }
      .textLeft {
        flex: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 12px;
        text-align: left;
        cursor: default;
      }
      .textRight {
        width: 140px;
        text-align: right;
        font-size: 12px;
        box-sizing: border-box;
        white-space: nowrap;
      }
    }
  }
  .loginRight {
    width: 48%;
    margin-left: 2%;
    box-sizing: border-box;
    float: left;
    margin-top: 24px;
    .loginRightText {
      h3 {
        font-size: 14px;
        color: #fff;
        margin-bottom: 8px;
      }
      text-align: left;
      color: #98a7af;
      font-size: 12px;
      font-style: normal;
      font-weight: 400;
      line-height: 20px;
      margin: 0 12px 12px 12px;
    }
  }
}
</style>
